<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <HelloWorld msg="Hello Vue 3.0 + Vite" />

    <a-button type="primary" @click="showModal">Open Modal</a-button>
    <a-modal
      :visible="visible"
      title="Basic Modal"
      @ok="handleOk"
      @cancel="visible = false"
    >
      <p>Some contents...</p>
      <p>Some contents...</p>
      <p>Some contents...</p>
    </a-modal>
  </div>
</template>
<script>
import HelloWorld from "../components/HelloWorld.vue";
import { defineComponent, ref, onMounted } from "vue";

export default defineComponent({
  name: "home",
  components: {
    HelloWorld,
  },
  setup() {
    const visible = ref(false);
    const showModal = () => {
      visible.value = true;
    };
    const handleOk = (e) => {
      // console.log(e);
      visible.value = false;
    };

    onMounted(() => {
      console.log(1111);
    });

    return {
      visible,
      showModal,
      handleOk,
    };
  },
});
</script>
<style lang="less"></style>
